<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>

<body>
<!--级联  三级   自己用js做级联菜单
js数组
-->
<div class="img">a</div>
<div class="img">b</div>
<div class="img">c</div>

<select class="city">
</select>
<select class="pe">
</select>
<select class="xian">
</select>
</body>
<script>
$(function(){
	var city = new Array();//定义成数组 //数组中 []不区分数字和字符串的
	city[0]="北京"; 
	city[1]="上海";
	city[2]="广州";
	city[3]="天津";
	city[4]="四川";
	
	var pe = new Array();
	for(var i=0;i<city.length;i++){
		pe[i] = new Array();
	}
	pe[0][0] = "海淀区";
	pe[0][1] = "朝阳区";
	
	pe[1][0] = "徐汇区";
	pe[1][1] = "静安区";
	pe[1][2] = "嘉定区";
	
	var xian = new Array();
	for(var i=0;i<city.length;i++){
		xian[i] = new Array();
		for(var j=0;j<pe[i].length;j++){
			xian[i][j] = new Array();
		}
	}
	
	xian[0][0][0] = "田贝";
	xian[0][0][1] = "田拉";
	
	xian[1][0][0] = "桂林";
	xian[1][0][1] = "漕宝路";
	
	//city.length 获得数组长度;
	for(var i=0;i<city.length;i++){
		$(".city").append("<option value="+i+">"+city[i]+"</option>");
	}
	for(var i=0;i<pe[0].length;i++){
		$(".pe").append("<option>"+pe[0][i]+"</option>");
	}
	for(var i=0;i<xian[0][0].length;i++){
		$(".xian").append("<option value="+i+">"+xian[0][0][i]+"</option>");
	}
	
	$(".city").change(function(){
		$(".pe").html(""); //清空区里边的内容
		var thisCity = $(this).val();
		//alert(thisCity);
		for(var i=0;i<pe[thisCity].length;i++){
			$(".pe").append("<option value="+i+">"+pe[thisCity][i]+"</option>");
		}
		$(".xian").html("");
	});
	
	$(".pe").change(function(){
		$(".xian").html("");
		var thisCity = $(".city").val();
		var thisPe = $(this).val();
		for(var i=0;i<xian[thisCity][thisPe].length;i++){
			$(".xian").append("<option>"+xian[thisCity][thisPe][i]+"</option>");
		}
	});
});
</script>
</html>
